<template>
    <view>
        <view class="alldiv">
            <!-- 这个是返回 -->
            <view class="navdiv">
                <u-navbar
                    back-text="返回"
                    @leftClick="navigateBack"
                    :leftText="language.Billdetails.nav"
                ></u-navbar>
            </view>
            <!-- 这个是列表区域 -->
            <view class="listdiv">
                <view class="listdd">
                    <u-cell-group>
                        <u-cell v-for="(item, i) in billlist" :key="i" center
                        >
                            <image
                                style="width: 26px; height: 26px"
                                slot="icon"
                                :src="item.billType === '1' ? require('@/static/Billdetails/consume.png') : require('@/static/Billdetails/recharge.png')"
                                mode="scaleToFill"
                            />
                            <view slot="title" style="display: flex">
                <span style="font-size: 12px; color: rgba(51, 51, 51, 1)">{{
                    getDictLabel(billType, item.billType)
                    }}

                </span>
                                <u-tag
                                    style="margin-left: 10px"

                                    :text="getDictLabel(orderType, item.recordType)"
                                    :type="getDictLabel(orderType, item.recordType)"
                                    plain
                                    size="mini">
                                </u-tag>
                            </view>
                            <view slot="value">
                <span
                    v-if="item.billType=='1'"
                    style="font-size: 12px; color: rgba(47, 212, 184, 1)"
                >-￥{{ item.cost }}</span
                >
                                <span
                                    v-else
                                    style="font-size: 12px; color: rgba(255, 82, 82, 1)"
                                >+￥{{ item.cost }}</span>
                            </view>
                            <view slot="label" style="display: flex">
                <span style="font-size: 12px; color: rgba(153, 153, 153, 1)">{{
                        item.startTime
                    }}</span>
                            </view>
                        </u-cell>
                    </u-cell-group>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import {billType, orderList, orderType} from "../../http/order/order";

export default {
    data() {
        return {
            language: {},
            billlist: [
                {
                    billType:'1', //1消费2充值
                    recordType: '1', //顺风车打车骑行
                    startTime: "2024-03-14 12:00", //顺风车打车骑行
                    cost: "30.00",
                },
                {
                    billType: '1', //1消费2充值
                    recordType: '2', //顺风车打车骑行
                    startTime: "2024-03-14 12:00", //顺风车打车骑行
                    cost: "30.00",
                },
                {
                    billType: '1', //1消费2充值
                    recordType: '3', //顺风车打车骑行
                    startTime: "2024-03-14 12:00", //顺风车打车骑行
                    cost: "30.00",
                },
                {
                    billType: '1', //1消费2充值
                    recordType: '4', //顺风车打车骑行
                    startTime: "2024-03-14 12:00", //顺风车打车骑行
                    cost: "30.00",
                },
                {
                    billType: '2', //1消费2充值
                    recordType: '4', //顺风车打车骑行
                    startTime: "2024-03-14 12:00", //顺风车打车骑行
                    cost: "30.00",
                },

            ],
            billType: [],
            orderType: [],
        };
    },
    onShow: function () {
        this.getlanguagedata();
        this.getData();
        this.getBillType();
        this.getOrderType();
    },
    // onLoad() {
    //     this.getlanguagedata();
    //     this.getData();
    //     this.getBillType();
    //     this.getOrderType();
    // },
    // mounted() {
    //     this.getlanguagedata();
    //     this.getData();
    //     this.getBillType();
    //     this.getOrderType();
    // },
    methods: {
        // 根据value返回对应的字典项
        getLabel(dict, value) {
          console.log("getLabel")
            const baseArr = (dict === 'bill' ? this.billType : this.orderType);
            const targetItem = baseArr.find(item => item.dictValue === value);
            return targetItem ? targetItem : '';
        },
      getDictLabel(data, dictValue) {
        // 查找与dictValue匹配的项
        const item = data.find(item => item.dictValue == dictValue);

        // 如果找到匹配项，则返回dictLabel，否则返回一个默认值
        return item ? item.dictLabel : '未知类型';
      },
        //获取账单枚举
        getBillType() {
            billType().then((res) => {
                this.billType = res.data
            })
        },
        //获取订单枚举
        getOrderType() {
            orderType().then((res) => {
                this.orderType = res.data
            })
        },
        //获取列表
        getData() {
            orderList().then((res) => {
                this.billlist = res.rows
            });
        },
        getlanguagedata() {
            this.language =
                this.$store.getters["internationalization/getinternationalization"];
        },
        // 返回上一个页面
        navigateBack() {
            uni.navigateBack({
                delta: 1,
                success: () => {
                    // 返回成功后的回调函数
                },
                fail: () => {
                    // 返回失败后的回调函数
                },
            });
        },
    },
};
</script>

<style lang="less">
.alldiv {
    width: 100vw;
    height: 100vh;
    //   这个是返回
    .navdiv {
        width: 100%;
        height: 10%;
        overflow: hidden;
        z-index: 999999;
    }

    // 这个是列表样式
    .listdiv {
        width: 100%;
        height: 90%;
        display: flex;
        flex-direction: column;

        align-items: center;

        .listdd {
            width: 95%;
            height: 100%;
            overflow: auto;
            border-radius: 6px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 2px 4px rgba(5, 48, 7, 0.08);
        }
    }
}
</style>
